<template>
  <div v-if="fire" id="fire" class="guide">
    <div class="pop-item">
      <h2 style="font-weight: normal;text-align: center;margin-bottom: 0.3rem">解雇厨师</h2>
      <p>
        解雇当前闲置的厨师可以帮你节省成本。 <br>
        解雇时会按厨师本周已经工作的日子结算工资，并会赔偿一周工资作为解约金。<br>
        解雇当前厨师结算工资及解约金需要付出￥140
        <br>
        <br>
      </p>
      <div class="bottom">
        <div class="button" style="width: 50%" @click="fired">是的,确认解雇</div>
        <div class="button" style="width: 40%" @click="fireCancel">先不了</div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {mapMutations} from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState([
      'fire'
    ])
  },
  methods: {
    ...mapMutations([
      'fireing',
      'fired',
      'fireCancel'
    ]),
  }
}
</script>

<style scoped>
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

</style>